<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div class="father">
            <div class="son"></div>
        </div>

        <script>
            // 事件流：事件完整执行过程的流动路径
            // 1. 事件捕获 事件的第三个参数：是否使用捕获 捕获的话，事件顺序是从大到小的顺序触发
            const father = document.querySelector('.father')
            const son = document.querySelector('.son')



            // 2. 事件冒泡：触发事件后，会依次向上触发父元素的同名事件

            // 3. 阻止冒泡：避免影响到父元素（比如点子元素，不希望触发父元素的事件）
            // 事件对象.stopPropagation() 阻止传播，既阻止捕获，又阻止冒泡
            son.addEventListener('click', function (e) {
                e.stopPropagation()
            }, true)

            // 4. 事件解绑 需要函数名，匿名函数无法解绑
            // son.removeEventListener('click', fn)

            // mouseenter 和 mouseleave 比 mouseover mouseout 更推荐，不会有冒泡
        </script>

    </body>
</html>